<template>
    <div class="green">
        <!-- 删除 -->
        <div class="dialog" style="">
            <div class="dialog-wrapper">
                <div class="dialog-header"><span class="dialog-header-title">提示</span></div>
                <div class="dialog-content">
                    删除后无法恢复，确认删除吗？
                </div>
                <div class="dialog-btns"><button type="button" class="cancel-btn" @click="delet">取消</button> <button
                        type="button" class="sure-btn" @click="delet">确定</button></div>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="event-tools show-event-tools">
            <ul class="tools-sidebar">
                <li><button class="tools-btn" @click="qh">切换主题</button></li>
                <li><button class="tools-btn">下载数据</button></li>
                <li><button class="tools-btn">导入数据</button></li>
                <li><button class="tools-btn" @click="edit">编辑数据</button></li>
                <li><button class="tools-btn">清空数据</button></li>
            </ul>
        </div>
        <!-- 编辑 -->
        <section class="event-all">
            <div class="table-box">
                <div class="edit-input">
                    <input type="text" v-model="neirong" />
                    <button class="btn" @click="qd">确定</button>
                </div>
                <div class="screen-box">
                    <div class="div-select" @click="xiala">
                        <div class="div-value">筛选类型</div>
                        <div class="div-select-body">
                            <div class="div-option">筛选类型</div>
                            <div class="div-option">未完成</div>
                            <div class="div-option">已完成</div>
                            <div class="div-option">已取消</div>
                        </div>
                    </div>
                    <input type="text" class="div-search" placeholder="筛选关键词" name="" id="" />
                </div>
                <table class="event-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>所有事项</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in newli" :key="index">
                            <td align="center">{{ index + 1 }}</td>
                            <td align="center">{{ item.title }}</td>
                            <td align="center" v-show="item.isChecked == 0">未完成</td>
                            <td align="center" v-show="item.isChecked == 1">已完成</td>
                            <td align="center" v-show="item.isChecked == 2">已取消</td>
                            <td align="center" style="font-size: 0px;">
                                <button class="del-btn1" @click="bianji(index, item.title)">编辑</button>
                                <button class="del-btn" @click="shanchu(index)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <!-- 切换主题 -->
        <section class="theme-box theme-box-show">
            <div class="theme">
                <div class="theme-title">
                    点击切换主题色
                </div>
                <div class="theme-list" v-for="(item, index) in colorArr " :key="index" @click="bgc(item)">
                    <span :style="{ backgroundColor: item }"></span>{{ item }}
                </div>
            </div>
        </section>
        <header>
            <h1>
                记事本
                <a class="t-btn" @click="mtk">
                    <span></span>
                </a>
            </h1>
        </header>
        <section class="container">
            <div class="event-add">
                <input type="text" class="n-input" placeholder="待办事项" v-model="text" @keydown.enter="add" />
                <button class="add-btn" @click="add">提交</button>
            </div>
            <div class="event-content">
                <div class="event-tab">
                    未完成
                    <span></span>
                </div>
                <div class="event-box">
                    <ul>
                        <li class="event-list" v-for="(item, index) in newli" :key="index" v-show="item.isChecked == 0">
                            <input type="checkbox" name="" id="" v-model="item.isChecked" />
                            <div>{{ item.title }}</div>
                            <button class="cancel-btn" @click="qx(index)">取消</button>
                        </li>
                    </ul>
                </div>
                <div class="event-tab">
                    已完成
                    <span></span>
                </div>
                <div class="event-box">
                    <ul>
                        <li v-for="(item, index) in newli" :key="index" class="event-list" v-show="item.isChecked == 1">
                            <input type="checkbox" name="" checked="checked" id="" v-model="item.isChecked">
                            <div>{{ item.title }}</div>
                            <span class="event-time">2023-9-11</span>
                        </li>
                    </ul>
                </div>
                <div class="event-tab">
                    已取消
                    <span></span>
                </div>
                <div class="event-box">
                    <ul>
                        <li class="event-list" v-for="(item, index) in newli" :key="index" v-show="item.isChecked == 2">
                            <div class="event-delete">{{ item.title }}</div>
                            <button class="cancel-btn" @click="hf(index)">恢复</button>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <footer class="footer">
        </footer>
    </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';
export default {
    setup() {
        let text = ref('');
        let newli = reactive(JSON.parse(localStorage.getItem('list')) || [])
        let flag = ref(false)
        let neirong = ref('')
        let id = ref('')
        let listindex = ref('')
        let colorArr = reactive([
            "#00b0f0",
            "#00d1b2",
            "#f4b976",
            "#f39894",
            "#26b6be"
        ])
        function add() {
            if (text.value.trim() === '') {
                text.value = ""
                return alert('请输入')
            } else {
                newli.push({ title: text.value, isChecked: 0 })
                text.value = ''
            }
        }
        watch(newli, (newv, oldv) => {
            localStorage.setItem('list', JSON.stringify(newv))
        })
        function qx(index) {
            newli[index].isChecked = 2
        }
        function hf(index) {
            newli[index].isChecked = 0
        }
        function mtk() {
            flag.value = !flag.value
            let tools = document.querySelector('.event-tools')
            let theme = document.querySelector('.theme-box')
            let event = document.querySelector('.event-all')
            if (flag.value) {
                tools.style.transform = "translateX(250px)"
                tools.style.transition = "all 0.4s ease"
            } else {
                tools.style.transform = "translateX(0px)"
                tools.style.transition = "all 0.4s ease"
                theme.style.transform = "translateX(0px)"
                theme.style.transition = "all 0.4s ease"
                event.style.transform = "translateX(-100%)"
                event.style.transition = "all 0.4s ease"
            }
        }
        function qh() {
            let theme = document.querySelector('.theme-box')
            let tools = document.querySelector('.event-tools')
            theme.style.transform = "translateX(230px)"
            theme.style.transition = "all 0.4s ease"
            tools.style.transform = "translateX(0px)"
            tools.style.transition = "all 0.4s ease"
        }
        function bgc(color) {
            let header = document.querySelector('header')
            let addbtn = document.querySelector('.add-btn')
            let tabs = document.querySelectorAll('.event-tab')
            let btns = document.querySelectorAll('.tools-btn')
            let eventBtns = document.querySelectorAll('.del-btn1')
            let editBtn = document.querySelector('.btn')
            header.style.backgroundColor = color
            addbtn.style.backgroundColor = color
            addbtn.style.border = color
            editBtn.style.backgroundColor = color
            if (newli.length) {
                for (var i = 0; i < eventBtns.length; i++) {
                    eventBtns[i].style.backgroundColor = color
                }
            } else {
            }
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].style.backgroundColor = color
            }
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = color
                btns[i].style.border = color
            }
        }
        function edit() {
            let event = document.querySelector('.event-all')
            let tools = document.querySelector('.event-tools')
            event.style.transform = "translateX(0px)"
            event.style.transition = "all 0.4s ease"
            tools.style.transform = "translateX(0px)"
            tools.style.transition = "all 0.4s ease"
        }
        function xiala() {
            let select = document.querySelector('.div-select')
            select.classList.toggle('active')
        }
        function bianji(index, title) {
            let editInput = document.querySelector('.edit-input ')
            editInput.classList.add('edit-input-show')
            let Input = document.querySelector('.edit-input>input')
            Input.focus()
            neirong.value = title
            id.value = index
        }
        function qd() {
            let editInput = document.querySelector('.edit-input')
            editInput.classList.remove('edit-input-show')
            newli[id.value].title = neirong.value
        }
        function shanchu(index) {
            let dialogWrapper = document.querySelector('.dialog-wrapper')
            let dialog = document.querySelector('.dialog ')
            dialog.style.display = "block"
            dialogWrapper.style.transform = "translate(-50%,50%)"
            dialogWrapper.style.transition = "all 0.4s ease"
            listindex.value = index
        }
        function delet() {
            let dialogWrapper = document.querySelector('.dialog-wrapper')
            let dialog = document.querySelector('.dialog ')
            dialog.style.display = "none"
            dialogWrapper.style.transform = "translate(-50%,-100%)"
            dialogWrapper.style.transition = "all 0.4s ease"
            newli.splice(listindex.value, 1)
        }
        return {
            newli,
            text,
            add,
            qx,
            hf,
            mtk,
            qh,
            edit,
            bgc,
            colorArr,
            xiala,
            bianji,
            neirong,
            qd,
            shanchu,
            delet
        }
    }
};
</script>

<style>
/* 删除 start*/
</style>